import React, { Fragment, useState } from 'react';
import {  EditOutlined, DragOutlined, ReadOutlined } from '@ant-design/icons';
import { Menu, Switch } from 'antd';
import { Link, Outlet ,useNavigate} from 'react-router-dom'

function getItem(label, key, icon, children, type) {

    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem('查看文章列表List', 'sub1', <ReadOutlined />),
    getItem('查看文章列表Table', 'sub2', <ReadOutlined />),
    getItem('文章编辑', 'sub3', <EditOutlined />,),
    getItem('修改资料', 'sub4', <DragOutlined />,),

];
const MenuComponent = () => {

    const router = useNavigate()

    const [theme, setTheme] = useState('light');
    const [current, setCurrent] = useState('sub1');
    const changeTheme = (value) => {
        setTheme(value ? 'dark' : 'light');
    };
    const onClick = (e) => {
        const {key} = e;
        switch (key) {
            case 'sub1':
                router('articleList')
                break;
            case 'sub2':
                router('articleTable')
                break;  
            case 'sub3':
                router('articleEditor')
                break;
            case 'sub4':
                router('modifyData')
                break;    
        }
        setCurrent(key);
    };



    return (
        <Fragment>
            {/* <Switch
                checked={theme === 'dark'}
                onChange={changeTheme}
                checkedChildren="Dark"
                unCheckedChildren="Light"
            /> */}
            <Menu
                theme={theme}
                onClick={onClick}
               
                defaultOpenKeys={['sub1']}
                selectedKeys={[current]}
                mode="inline"
                items={items}
            />
        </Fragment>
    );
};
export default MenuComponent;
